<template>
  <div class="f-bclos f-pa">
    <div class="m-top f-brow f-pr">
      <div class="m-back " @touchstart="backSet()">
        <div class="f-ib m-back-icon"></div>
        <div class="f-ib m-back-set"></div>
      </div>
      <div class="m-top-tit f-bavg flex-cent ">
        <p class="f-ib">背景设置</p>
      </div>
    </div>
    <div class="f-bavg set-bgImg flex-cent">
      <div class="f-brow">
        <div class="set-bg-box" v-for="item in themeList" :key="item.id" :class="item.cock == 1?'active':''" @touchstart.stop="changeTheme(item)">
          <div class="bg-img" :class="item.className">
            <i></i>
          </div>
          <div class="bg-name">{{item.name}}</div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Set-bg",
  data() {
    return {
      themeList: []
    };
  },
  created() {
    this.getThemeList();
  },
  methods: {
    backSet() {
      this.$router.push({ path: "/main/set" });
    },
    getThemeList() {
      this.themeList = JSON.parse(localStorage.themeList);
    },
    changeTheme(array) {
      this.themeList.map(arr => {
        if (arr == array) {
          arr.cock = 1;
          this.$parent.theme = arr.className;
        } else {
          arr.cock = 0;
        }
      });
      localStorage.themeList = JSON.stringify(this.themeList);
    }
  }
};
</script>
